<template>
  <u-navbar :autoBack="true" :fixed="true">
    <view class="detail-nav-bar-center" slot="center">
      <view class="detail-nav-bar-item" v-for="(item,index) in title" :class="{active:currPoint==index}"
        @tap="itemClick(index)">
        {{item}}
      </view>
    </view>
  </u-navbar>
</template>

<script>
  export default {
    props:{
      currPoint:{
        type:Number,
        default:0
      }
    },
    data() {
      return {
        title: ['商品', '参数', '评论', '推荐'],
      };
    },
    methods: {
      itemClick(index) {
        this.$emit('pageScrollTo', index)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .detail-nav-bar-center {
    width: 300upx;
    display: flex;
    font-size: 28upx;

    .detail-nav-bar-item {
      flex: 1;
    }
  }

  .active {
    color: #3c9cff;
  }
</style>
